<template>
  <div class="listDetail">
    <header class="top">
      <span @click="cityObj">返回</span>
      <span v-text="this.list.title"></span>
    </header>
    <!-- 下拉菜单 -->
    <div class="dropMenu">
      <van-dropdown-menu>
        <van-dropdown-item :title="list.title" ref="item">
          <van-tree-select
            height="55vw"
            :items="items"
            :main-active-index.sync="active"
          >
            <template #content>
              <van-cell-group
                v-for="(v, i) in allShop"
                :key="i"
                v-if="active === i"
              >
                <van-cell
                  v-for="(v1, i1) in v.sub_categories"
                  :key="i1"
                  v-if="i1 > 0"
                  :title="v1.name"
                  :value="v1.count"
                  @click="clickItem(v1)"
                />
              </van-cell-group>
            </template>
          </van-tree-select>
        </van-dropdown-item>
        <!-- 距离排序 -->
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="changeList"
        />
      </van-dropdown-menu>
    </div>
    <!-- 附近商家 -->
    <div class="restListObj">
      <ul>
        <li v-for="(v, i) in restList" :key="i" class="restLi">
          <div class="restListImg">
            <img :src="'https://elm.cangdu.org/img/' + v.image_path" alt="" />
          </div>
          <div class="restListMsg">
            <span v-text="v.name" class="rName"></span>
            <span v-for="(v1, i1) in v.supports" :key="i1" class="support">
              <span v-text="v1.icon_name"></span>
            </span>
            <span class="rate">
              <van-rate
                v-model="v.rating"
                allow-half
                readonly
                :size="10"
                color="#ffd21e"
              />
              <span v-text="v.rating"></span>
            </span>
            <span
              v-text="'月售' + v.recent_order_num + '单'"
              class="rOrderNum"
            ></span>
            <span
              v-if="v.delivery_mode"
              v-text="v.delivery_mode.text"
              class="delMode"
            ></span>
            <span
              v-if="v.supports[1]"
              v-text="v.supports[1].name"
              class="onTime"
            ></span>
            <span
              v-text="'￥' + v.float_minimum_order_amount + '起送 /'"
              class="minAmount"
            ></span>
            <span v-text="v.piecewise_agent_fee.tips" class="fee"></span>
            <span v-text="v.distance + ' /'" class="rDistance"></span>
            <span v-text="v.order_lead_time" class="rLeadTime"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "listDetail",
  data() {
    return {
      active: 0,
      items: [],
      order: "", //排序方式
      restList: {}, //附近商家
      listId: [], //分类id
      allShop: {}, //全部商家
      allShopName: {}, //全部商家的名字
      category_id:"",//商品分类id
      // 下拉列表
      list: {},
      value2: 4,
      value3: "a",
      option2: [
        { text: "默认排序", value: 4, icon: "exchange" },
        { text: "距离排序", value: 5, icon: "location-o" },
        { text: "销量排序", value: 6, icon: "fire-o" },
        { text: "起送价最低", value: 1, icon: "after-sale" },
        { text: "配送速度最快", value: 2, icon: "tosend" },
        { text: "评分最高", value: 3, icon: "good-job-o" },
      ],
      option3: [
        { text: "筛选", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  created() {
    this.location = this.nowPosition.address;
    // 获取食物列表
    this.getFoodList();
    // 获取附近商家
    this.getRestList();
    //获取所有商铺
    this.getAllShop();
  },
  methods: {
    getFoodList() {
      this.list = this.listMsg;
    },
    cityObj() {
      this.$router.back();
      //this.$router.go(-1) -n代表返回几级
    },
    // 获取附近商家
    getRestList() {
      let api =
        this.eleUrl.restList +
        "?latitude=" +
        this.nowPosition.latitude +
        "&longitude=" +
        this.nowPosition.longitude +
         "&restaurant_category_id=" +
        this.listId +
        "&restaurant_category_ids[]=" +
        this.listId +
        "&order_by=" +
        this.order;
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        this.restList = res.data;
      // console.log(api)
        //console.log(res.data);
      });
    },
    // 获取所有商铺分类
    getAllShop() {
      let api=this.eleUrl.allShopList;
      //let api = "https://elm.cangdu.org/shopping/v2/restaurant/category";
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        console.log(res.data);
        this.allShop = res.data;
        // res.data.map((item) => {
          // if (this.list.title == item.name) {
          //   this.listId = item.id;
          // }
          //console.log(this.listId)
        // });
        //console.log(this.allShop)
        //将商品列表名转换为数组存入下拉列表的插件中
        this.allShop.map((item, index) => {
          this.items[index] = { text: item.name };
          //console.log(this.items[index])
          this.items.push(this.items[index]);
        });
      });
    },
    //点击改变排序方式
    changeList(valueObj) {
      // 当前排序方式
      this.order = valueObj;
      console.log(this.order)
      this.value2 = valueObj;
      //重新获取商家
      this.getRestList();
      console.log(this.listId)
    },
    // 点击右侧内容栏事件
    clickItem(shopValue) {
      this.listId=shopValue.id;
      this.list.title=shopValue.name;
      console.log(shopValue)
      this.getRestList();
      // 关闭下拉菜单
      this.$refs.item.toggle();
    },
  },
  computed: {
    ...mapState(["listMsg", "eleUrl", "nowPosition"]),
  },
};
</script>

<style scoped>
.listDetail {
  font-size: 0.15rem;
}
.top {
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.top > span {
  color: white;
  line-height: 0.4rem;
  margin-left: 0.2rem;
}
.top > span:nth-child(2) {
  margin-left: 1.2rem;
  font-weight: bold;
}
/* 附近商家 */
.restTitle {
  color: gray;
  padding: 0.1rem;
  font-size: 0.13rem;
}
.el-icon-school {
  font-size: 0.18rem;
  margin-right: 0.03srem;
}
.restListObj {
  width: 3.75rem;
  background-color: #fff;
  margin-top: 0.1rem;
}
.restLi {
  width: 3.75rem;
  height: 1rem;
}
.restListImg {
  float: left;
  width: 25%;
  height: 100%;
}
.restListImg > img {
  width: 80%;
  height: 80%;
  display: block;
  margin: 0.1rem auto;
}
.restListMsg span {
  display: inline-block;
}
.rName {
  font-size: 0.18rem;
  font-weight: bold;
  display: inline-block;
  width: 1.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 0.55rem;
  margin-top: 0.1rem;
}
.rName::before {
  content: "\54C1\724C";
  display: inline-block;
  font-size: 0.1rem;
  line-height: 0.18rem;
  color: #333;
  background-color: #ffd930;
  padding: 0 0.03rem;
  border-radius: 0.05rem;
  margin-right: 0.08rem;
}
.support > span {
  border: 1px solid #ddd;
  color: gray;
  margin: 0.01rem;
  font-size: 0.02rem;
}
/* 评分星星 */
.rate {
  font-size: 0.1rem;
  margin-top: 0.1rem;
  margin-right: 0.05rem;
  color: orangered;
  width: 0.9rem;
}
.rOrderNum {
  font-size: 0.05rem;
  color: gray;
  width: 0.6rem;
}
.delMode {
  color: white;
  background-color: rgba(33, 145, 250, 0.849);
  font-size: 0.05rem;
  padding: 0.02rem;
  border-radius: 0.03rem;
  margin-left: 0.1rem;
}
.onTime {
  background-color: white;
  color: rgba(33, 145, 250, 0.849);
  border: 0.01px solid rgba(33, 145, 250, 0.849);
  font-size: 0.05rem;
  padding: 0.01rem;
}
.minAmount,
.fee,
.rDistance,
.rLeadTime {
  font-size: 0.08rem;
  color: gray;
  margin-top: 0.1rem;
}
.rLeadTime {
  color: rgb(48, 141, 247);
}
</style>